<template>
  <div class="echarts-container">
    <h1>container</h1>
    <template v-for="(item, index) in state.titleList" :key="item">
      <a-button @click="handleClick(index)" type="danger" style="margin: 5px">{{
        item
      }}</a-button>
    </template>
    <!-- keep-alive 可以缓存组件 -->
    <keep-alive>
      <component :list="state.list" :is="state.componentName"></component>
    </keep-alive>
  </div>
</template>
<script lang="ts">
/**
 * echarts
 * x轴 ： xAxis
 * y轴 ：yAxis
 * 数据：series
 *
 * 动态组件
 *
 */
import * as echarts from 'echarts'
import { defineComponent, onMounted, reactive } from 'vue'
type SeriesType = { node: string; type: string; data: any[] }
import MyBar from './components/MyBar.vue'
import MyPie from './components/MyPie.vue'

interface StateType {
  titleList: string[]
  componentName: string
  list: any[]
  pie: any[]
  bar: number[]
}
export default defineComponent({
  components: {
    MyBar,
    MyPie
  },
  setup() {
    const state: StateType = reactive({
      titleList: ['柱状图', '饼状图'],
      componentName: 'MyPie',
      list: [],
      pie: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      bar: [5, 10, 15, 60, 100]
    })

    state.list = state.pie

    const handleClick = (index: number) => {
      if (index === 0) {
        state.list = state.bar
        state.componentName = 'MyBar'
      } else {
        state.list = state.pie
        state.componentName = 'MyPie'
      }
    }

    return {
      state,
      handleClick
    }
  }
})
</script>
